<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>二维码扫描</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<script src="js/mui.min.js"></script>
		<style type="text/css">
			#bcid {
				width: 100vh;
				height: 100vh;
				position: fixed;
				background: black;
			}
			
			html,
			body,
			div {
				height: 100%;
				width: 100%;
			}
			
			.fbt {
				color: white;
				width: 50%;
				background-color: black;
				float: left;
				line-height: 45px;
				text-align: center;
			}
			
			.fbt:active {
				-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.5);
				box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.5);
			}
			
			#xc {
				color: white;
				background-image: url(images/photo.png);
				float: right;
				top: 7px;
				left: -20px;
			}
			
			.mui-bar-nav.mui-bar .mui-icon {
				padding-right: 22px;
				padding-bottom: 20px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav" style="background-color: black;">
			<a class="mui-icon mui-icon-left-nav mui-pull-left" onclick="qx()" style="color: white;"></a>
			<h1 class="mui-title" style="color: white;" id="turnTheLight">二维码扫描</h1>
			<span class="mui-icon" id="xc" onclick="scanPicture();"></span>
		</header>
		<div style="height:44px"></div>
		<div id="bcid">
			<!--盛放扫描控件的div-->
		</div>
		<script type="text/javascript">
			var height = window.innerHeight + 'px'; //获取页面实际高度   
			var width = window.innerWidth + 'px';
			document.getElementById("bcid").style.height = height;
			document.getElementById("bcid").style.width = width;

			scan = null; //扫描对象   
			mui.plusReady(function() { //通过mui初始化扫描 
				mui.init();
				startRecognize();
			});

			function startRecognize() { //开启扫描 
				try {
					var filter;
					//自定义的扫描控件样式   
					var styles = {
						frameColor: "#29E52C",
						scanbarColor: "#29E52C",
						background: ""
					}
					//扫描控件构造   
					scan = new plus.barcode.Barcode('bcid', filter, styles);
					scan.onmarked = onmarked;
					scan.onerror = onerror; //扫描错误 
					scan.start();
					//打开关闭闪光灯处理   
					var flag = false;
					document.getElementById("turnTheLight").addEventListener('tap', function() {
						if(flag == false) {
							scan.setFlash(true);
							flag = true;
						} else {
							scan.setFlash(false);
							flag = false;
						}
					});
				} catch(e) {
					alert("出现错误啦:\n" + e);
				}
			};

			function onerror(e) { //错误弹框 
				alert(e);
			};

			function onmarked(type, result) { //这个是扫描二维码的回调函数，type是扫描二维码回调的类型 
				var text = '';
				switch(type) { //QR,EAN13,EAN8都是二维码的一种编码格式,result是返回的结果 
					case plus.barcode.QR:
						text = 'QR: ';
						break;
					case plus.barcode.EAN13:
						text = 'EAN13: ';
						break;
					case plus.barcode.EAN8:
						text = 'EAN8: ';
						break;
				}
				localStorage.setItem('txl2', result.replace(/\"/g, ""));
				mui.openWindow({
					createNew:true,// 打开并且刷新：true刷新，false不刷新
					show:{
						autoShow:true,
						aniShow:'fade-in',
					},
					url: 'extract.html',
					id: 'extract'
				});
			};
			
			function qx() {
				localStorage.removeItem('txl2');
				mui.openWindow({
					createNew:false,// 打开并且刷新：true刷新，false不刷新
					show:{
						autoShow:true,
						aniShow:'fade-in',
					},
					url: 'extract.html',
					id: 'extract'
				});
			}

			// 从相册中选择二维码图片    
			function scanPicture() { //可以直接识别二维码图片 
				plus.gallery.pick(function(path) {
					plus.barcode.scan(path, onmarked, function(error) {
						plus.nativeUI.alert("无法识别此图片");
					});
				}, function(err) {
					plus.nativeUI.alert("Failed: " + err.message);
				});
			}
		</script>
	</body>

</html>